<template>
  商品列表
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="proname" label="商品" width="180" align="center"/>
    <!-- <el-table-column prop="name" label="Name" width="180" /> -->
    <el-table-column prop="address" label="图片" align="center">
      <!-- #default="scope" scoped组件内部反传回来的值，scoped.row是数组对应元素 -->
      <template #default="scope">
        <img :src="scope.row.imgs[0]" alt="" class="img">
      </template>
    </el-table-column>
    <el-table-column prop="address" label="是否售卖" align="center">
      <!-- #default="scope" scoped组件内部反传回来的值，scoped.row是数组对应元素 -->
      <template #default="scope">
        <el-switch v-model="scope.row.issale" @change="isSaleChange(scope.row)"
        :active-value="1"
        :inactive-value="0"/>
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 
</el-drawer>
  <el-drawer v-model="drawer2" :direction="rtl">
    <template #header>
      <h4>set title by slot</h4>
    </template>
    <template #default>
      <el-form :model="editObj" label-width="auto" style="max-width: 600px">
    <el-form-item label="商品名称">
      <el-input v-model="editObj.proname" />
    </el-form-item>
    <el-form-item label="商品价格">
      <el-input v-model="editObj.originprice" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
    </template>
  </el-drawer> -->
</template>
  
<script setup lang='ts'>
import { proDelRequest, proListRequest, proUpdateRequest } from "@/api/pro"
import {ref} from "vue"


const tableData = ref<Array<IlistItemData>>([])
  const count = 1
  const limitNum = 10
function loadList(){
  proListRequest(count,limitNum).then((r)=>{
  console.log(r.data.data);
  tableData.value = r.data.data
})
}
loadList()

//删除
const handleDelete = (index: number, row: IlistItemData) => {
  console.log(index, row)
  proDelRequest(row.proid).then((r)=>{
    console.log(r.data);
    loadList()
    
  })
}
//是否售卖
function isSaleChange(row:IlistItemData){
  proUpdateRequest(row.proid,{issale:row.issale?1:0}).then(()=>{
    loadList()
  })
}
//控制抽屉的显示和隐藏
const drawer2 = ref(false)
const editObj = ref({})
const handleEdit = (index: number, row:IlistItemData ) => {
  console.log(index, row)
  drawer2.value = true
  editObj.value = JSON.parse(JSON.stringify(row))
}
</script>
  
<style scoped>
  .img{
    width: 100px;
  }
</style>